<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="详情"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </van-sticky>
    <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in imgarr" :key="index">
            <img :src="baseurl+image" style="width: 100%; height: 300px;"/>
        </van-swipe-item>
    </van-swipe>
    <div style="text-align: center;">
        <h4>￥{{ detlist.price }}</h4>
        <h4>{{ detlist.tintro }}</h4>
    </div>
    <img :src="img" style="width: 100%;" alt="">
    <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" to="/tab/car"/>
        <van-goods-action-button color="#9acd32" type="warning" text="加入购物车" @click="over"/>
        <van-goods-action-button color="#008000" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data () {
    return {
      detlist: [],
      imgarr: [],
      baseurl: '',
      img: ''
    }
  },

  // 接收父组件传递过来的参数
  props: {},

  components: {},

  // computed是计算属性，也就是依赖其它的属性计算所得出最后的值
  computed: {},

  // 页面初始化方法
  mounted () {
    this.getDet()
  },

  // 监听方法 click事件等 ，执行drawFeatures方法
  methods: {
    getDet () {
      this.$api.Det(this.$route.query).then(res => {
        if (res.data.code === 200) {
          this.detlist = res.data.msg
          this.baseurl = res.data.baseurl
          this.imgarr = res.data.msg.imgarr
          this.img = this.baseurl + this.detlist.banner
        }
      })
    },
    over () {
      const obj = {
        pimg: this.baseurl + this.detlist.timg,
        pnum: 1,
        price: this.detlist.price,
        tid: this.detlist.tid,
        tname: this.detlist.tname
      }
      const cartarr = JSON.parse(localStorage.getItem('cartarr'))
      if (cartarr) { // 判断此商品是否已经在购物车里边了
        const t = cartarr.some(v => {
          return v.tid === obj.tid
        })
        if (!t) { // 购物车不存在此商品
          cartarr.push(obj)
        } else { // 购物车中存在此商品 让数量++
          cartarr.find(v => v.tid === obj.tid).pnum++
        }
        localStorage.setItem('cartarr', JSON.stringify(cartarr))
      } else {
        const arr = []
        arr.push(obj)
        localStorage.setItem('cartarr', JSON.stringify(arr))
      }
    }
  }
}

</script>
<style lang='less' scoped>
/deep/.van-nav-bar .van-icon{
    color: #a7cd6d;
}
/deep/.van-nav-bar__text{
    color: #a7cd6d;
}
</style>
